<script setup>
import { storeToRefs } from "pinia";
import { useUserStore } from "@/stores";
const userStore = useUserStore();
const { rePwdFormData, rePwdForm } = storeToRefs(userStore);
const { rePwdRules, clearRePwdFormData, submitRePwd } = userStore;
</script>

<template>
  <CardPage>
    <template #title>修改密码</template>
    <el-form
      label-width="5vw"
      size="large"
      :model="rePwdFormData"
      :rules="rePwdRules"
      ref="rePwdForm"
    >
      <el-form-item label="员工号" prop="employeeId">
        <el-input
          v-model="rePwdFormData.employeeId"
          placeholder="请输入员工号"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item label="身份证号" prop="identity">
        <el-input
          v-model="rePwdFormData.identity"
          placeholder="请输入身份证号"
        ></el-input>
      </el-form-item> -->
      <el-form-item label="原密码" prop="oldPwd">
        <el-input
          v-model="rePwdFormData.oldPwd"
          placeholder="请输入原密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPwd">
        <el-input
          v-model="rePwdFormData.newPwd"
          placeholder="请输入新密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="rePwd">
        <el-input
          v-model="rePwdFormData.rePwd"
          placeholder="请再次输入新密码"
        ></el-input
      ></el-form-item>
    </el-form>
    <el-button type="primary" @click="submitRePwd">提交</el-button>
    <el-button @click="clearRePwdFormData">清空</el-button>
  </CardPage>
</template>

<style scoped>
.el-form {
  padding: 2vw;
  width: 50%;
}
.el-button {
  width: 5vw;
  margin-left: 1vw;
}
</style>
